<template>
  <view class="reportItemContainer" @click="handleItemClick(reportItem.mpaActivityId)">
    <view class="left">
      <image :src="reportItem.bannerUrl" class="reportImg"></image>
    </view>
    <view class="right">
      <view class="reportTitle">{{ reportItem.activityName }}</view>
      <view class="reportDesc">{{ reportItem.activityIntroduce }}</view>
      <view class="reportTags">
        <text class="tags" v-for="(v, index) in reportItem.activityTags.split(',')" :key="index">{{ v }}</text>
      </view>
      <view v-if="reportItem.isBuy == 2" class="reportEntrance">免费预览
        <image
          src="//upload.yl1001.com/upload/images/view?file=e0/-6iFEh6ZQP,OZbSNYadLvec2WYRXjPUar377lefHtOo_t7-skOsN=2oxEf.png">
        </image>
      </view>
      <view v-else class="reportEntrance">
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "reportItem",
  props: {
    reportItem: {
      type: Object,
      required: true,
    },
  },
  components: {},
  methods: {
    handleItemClick(mpaActivityId) {
      uni.navigateTo({
        url:
          "/pagesSub/careerGrow/reportPreview/reportPreview?mpaActivityId=" +
          mpaActivityId,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.reportItemContainer {
  display: flex;
  width: 690rpx;
  padding: 18rpx 0;
  background-color: #ffffff;
  // margin: 20rpx auto;
  // margin-bottom: 16rpx;
  border-radius: 30rpx;
  .left {
    .reportImg {
      width: 164rpx;
      height: 180rpx;
      border-radius: 20rpx;
      margin-right: 28rpx;
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .reportTitle {
      width: 100%;
      height: 44rpx;
      font-size: 30rpx;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      font-weight: bold;
      color: #222222;
      line-height: 44rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      // text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
    }
    .reportDesc {
      width: 100%;
      display: flex;
      height: 36rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 36rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .reportTags {
      .tags {
        height: 32rpx;
        background: #f5f5f5;
        border-radius: 4rpx;
        font-size: 20rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #555555;
        line-height: 20rpx;
        margin-right: 16rpx;
        padding: 6rpx 12rpx;
      }
    }
    .reportEntrance {
      position: relative;
      display: flex;
      height: 36rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 36rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #ff9159;
      ::v-deep .uni-icons {
        color: #ff9159 !important;
        font-size: 20rpx !important;
        padding-top: 4rpx;
        margin-left: 8rpx;
      }
      image {
        position: absolute;
        width: 22rpx;
        height: 26rpx;
        top: 18%;
        left: 108rpx;
      }
    }
  }
}
</style>
